<template>
    <div>
        <div >
            <span>仓库：</span>
            <el-input v-model="warehouseName" style="width: 150px;" clearable placeholder="请输入内容"></el-input>
            <span >地址：</span>
            <el-input v-model="warehouseSite" style="width: 150px;" clearable placeholder="请输入内容"></el-input>
            <!--表单-->
            <!--弹窗框-->
            <div class="default-margin handler">
            <el-button type="primary"  @click="select" icon="el-icon-search">搜索</el-button>
            <el-button type="primary"  @click="dialogFormVisible = true">添加仓库</el-button>
            </div>
            <el-dialog style="margin-left: 20px" title="添加仓库" :visible.sync="dialogFormVisible" width="34%"
                       center>
                <el-form ref="subForm" :rules='rules' :model="subForm" label-width="120px">
                    <el-form-item label="仓库名称：" prop="uname">
                        <el-input v-model="subForm.uname" clearable placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区：" prop="city">
                        <div class="city" @click="toAddress">
                            <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
                        </div>
                        <i class="arrow-r"> </i>
                        <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                        </v-distpicker>
                        <div class="mask " v-show="mask"></div>
                    </el-form-item>
                    <el-form-item label="具体地址：" prop="details">
                        <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addHouse">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        :index="indexMethod"
                        width="50"
                       >
                </el-table-column>
                <el-table-column
                        prop="warehouseName"
                        label="仓库名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="warehouseSite"
                        label="仓库地址"
                       >
                </el-table-column>
                <el-table-column
                        prop="warehouseNumState"
                        label="仓库存储情况"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="creationTime"
                        label="仓库创建时间"
                       >
                </el-table-column>
                <el-table-column
                        prop="modifyTime"
                        label="最后修改时间"
                       >
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                v-if="scope.row.warehouseNumState=='空仓'"
                                @click="handleDelete(scope.$index, scope.row)">移除
                        </el-button>
                        <el-button
                                size="mini"
                                type="info"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-dialog style="margin-left: 20px" title="修改仓库" :visible.sync="dialogForm" width="34%"
                                   center>
                            <el-form ref="Form" :rules='rules' :model="Form" label-width="120px">
                                <el-form-item label="仓库名称：" prop="uname">
                                    <el-input v-model="Form.uname" clearable placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <el-form-item label="所在地区：" prop="city">
                                    <div class="city" @click="toAddress">
                                        <el-input v-model="Form.city" clearable placeholder="请点击输入框选择"></el-input>
                                    </div>
                                    <i class="arrow-r"> </i>
                                    <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                                    </v-distpicker>
                                    <div class="mask" v-show="mask"></div>
                                </el-form-item>
                                <el-form-item label="具体地址：" prop="details">
                                    <el-input v-model="Form.details" clearable placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogForm = false">取 消</el-button>
                                <el-button type="primary" @click="updateData(scope.$index, scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <!--
            size-change：选择每页显示几行
            current-change：上一页 下一页
            current-page：当前页
            page-sizes：一页显示多少行的集合
            page-size：一页显示多少行
            total：总条数
                 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import VDistpicker from 'v-distpicker' //引入安装好的包
    export default {
        name: 'AddWarehouse',
        components: {VDistpicker},
        mounted() {//默认第一次加载
            initTable(this)
        },
        data() {
            return {
                dialogFormVisible: false,
                warehouseName: '',
                warehouseSite: '',
                dialogForm: false,
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                subForm: {
                    city: '',
                    uname: '',
                    details: ''
                },
                Form: {
                    city: '',
                    uname: '',
                    details: '',
                    warehouseId: ''
                },
                addInp: false,
                mask: false,
                rules: {
                    uname: [
                        {
                            required: true,
                            message: '仓库名不能为空',
                            trigger: 'blur'
                        }
                    ],
                    city: [
                        {
                            required: true,
                            message: '所在区域必须选择',
                            trigger: 'change'
                        }
                    ],
                    details: [
                        {
                            required: true,
                            message: '详细地址必须填写',
                            trigger: 'blur'
                        }
                    ],
                }
            }
        },
        methods: {
            //搜索按钮
            select() {

                // alert(this.warehouseSite)
                initTable(this)
            },
            //移除按钮监听
            handleDelete(index, row) {
                // console.log(index, row);
                // alert(row.warehouseNum)
                if (row.warehouseNum != 1) {
                    this.$message.error('仓库有库存，不能移除')
                    return false
                }
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get('delWarehouse', {
                        params: {
                            warehouseId: row.warehouseId
                        }
                    }).then(resp => {
                        if (resp) {
                            if (resp.data == '删除成功') {
                                this.$message.success(resp.data)
                                initTable(this)
                            } else {
                                this.$message.error(resp.data)
                            }
                        }
                    })
                }).catch(() => {
                    //几点取消的提示
                })

            },

            //编辑监听
            handleEdit(index, row) {
                this.dialogForm = true
                this.warehouseId = row.warehouseId
                this.Form.uname = row.warehouseName
                this.Form.city = row.warehouseSite.substring(0, row.warehouseSite.lastIndexOf("区") + 1)
                this.Form.details = row.warehouseSite.substring(row.warehouseSite.lastIndexOf("区") + 2), ((row.warehouseSite.length) - 1)
                // this.Form.warehouseId=row.warehouseId
            },
            //修改数据按钮
            updateData(index, row) {
                // alert(row.warehouseId)
                if (this.Form.uname == null || this.Form.uname === '') {
                    this.$message.error(new Error('仓库名不能为空'))
                    return false
                }
                if (this.Form.city == null || this.Form.city === '') {
                    this.$message.error(new Error('所在区域必须选择'))
                    return false
                }
                if (this.Form.details == null || this.Form.details === '') {
                    this.$message.error(new Error('详细地址不能为空'))
                    return false
                }
                this.$axios.post('updateWarehouse', {
                    warehouseId: this.warehouseId,
                    warehouseName: this.Form.uname,
                    warehouseSite: this.Form.city + " " + this.Form.details
                }).then(resp => {
                    if (resp) {
                        if (resp.data == '修改成功') {
                            this.$message.success(resp.data)
                            this.dialogForm = false
                            initTable(this)
                        } else {
                            this.$message.error(resp.data)
                        }
                    }
                })
            },
            //自定义校验规则
            addHouse() {
                if (this.subForm.uname == null || this.subForm.uname === '') {
                    this.$message.error(new Error('仓库名不能为空'))
                    return false
                }
                if (this.subForm.city == null || this.subForm.city === '') {
                    this.$message.error(new Error('所在区域必须选择'))
                    return false
                }
                if (this.subForm.details == null || this.subForm.details === '') {
                    this.$message.error(new Error('详细地址不能为空'))
                    return false
                }

                this.$axios.post('/addWarehouse', {
                    warehouseName: this.subForm.uname,
                    warehouseSite: this.subForm.city + ' ' + this.subForm.details
                }).then(response => {
                    // alert(response.data)
                    if (response.data == '添加成功') {
                        this.$message.success(response.data)
                        this.dialogFormVisible = false
                        initTable(this)
                        this.$refs['subForm'].resetFields()
                    } else if (response.data == '添加失败') {
                        this.$message.error(response.data)
                    } else {
                        this.$message.error(response.data)
                    }
                }).catch(err => {
                    alert(err.data)
                })

            },
            // 点击弹出三级联动
            toAddress() {
                this.mask = true
                this.addInp = true
            },
            // 省市区三级联动
            selected(data) {
                this.mask = false
                this.addInp = false
                this.subForm.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
            },
            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            }
        },
    }

    function initTable($this) {
        $this.$axios.post('getWarehouseList', {
            page: $this.page,
            size: $this.size,
            warehouseName: $this.warehouseName,
            warehouseSite: $this.warehouseSite
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.warehouseList
                $this.total = resp.data.count
            }
        })
    }

</script>

<style scoped>
.handler{
    display: inline-block;
}
</style>
